<template>
<view class="page room bgf7 c00">
	<view class="flex flexC flexB py14 bgff">
		<picker class="flex1 aliC" range-key="username" mode="selector" :range="staffList" @change="changeStatus">
			<view>
				<text>{{staffList[statusIndex].username}}</text>
				<image class="ml4 w12" src="/static/img/icon/down.png" mode="widthFix"></image>
			</view>
		</picker>
		<picker class="flex1 aliC" mode="selector" :range="bindList" @change="changeBind">
			<view>
				<text>{{bindList[bindIndex]}}</text>
				<image class="ml4 w12" src="/static/img/icon/down.png" mode="widthFix"></image>
			</view>
		</picker>
		<view class="flex1 aliC" @click="showShop">
			<view>
				<text>{{selectShop.name}}</text>
				<image class="ml4 w12" src="/static/img/icon/down.png" mode="widthFix"></image>
			</view>
		</view>
	</view>
	<scroll-view scroll-y="true" class="list">
		<view v-for="(item,index) in cleanList" :key="index" class="bgff m15 r7 pt24 pb20 px12 shadow">
			<view class="flex flexC">
				<image class="w82 r6" :src="item.room.logo" mode="aspectFill"></image>
				<view class="flex1 ml12">
					<view class="bold6">{{item.room.name}}</view>
					<view v-if="item.status== 'undo'">
						<view class="fs13 mt6">开始时间：{{item.start_time_text}}</view>
						<view class="fs13 mt6">结束时间：{{item.end_time_text}}</view>
						<view class="fs13 flex mt6 flexC">
							<text>还剩</text>
							<text class="cff0 bold6 px6">{{item.time}}分钟</text>
							<text>结束</text>
							<text class="flex1 aliR cff0 bold6">{{item.status_txt}}</text>
						</view>
					</view>

					<view v-else-if="item.status== 'doing'">
						<view class="fs13 mt6">开始打扫时间：{{item.clean_start_time_text}}</view>
						<text class="flex1 aliR cff0 bold6">{{item.status_txt}}</text>

					</view>

					<view v-else-if="item.status== 'done'">
						<view class="fs13 mt6">开始时间：{{item.clean_start_time_text}}</view>
						<view class="fs13 mt6">结束时间：{{item.clean_end_time_text}}</view>
						<view class="fs13 flex mt6 flexC">
							<text>打扫</text>
							<text class="cff0 bold6 px6">{{item.time}}分钟</text>
							<text class="flex1 aliR cff0 bold6">{{item.status_txt}}</text>
						</view>
					</view>
					
					<view v-else>
						<view class="fs13 mt6">开始时间：{{item.start_time_text}}</view>
						<view class="fs13 mt6">结束时间：{{item.end_time_text}}</view>
						<view class="fs13 flex mt6 flexC">
							<text class="flex1 aliR cff0 bold6">{{item.status_txt}}</text>
						</view>
					</view>

				</view>
			</view>

		</view>


	</scroll-view>

	<!-- 店铺选择 -->
	<uni-popup ref="shopPicker" type="bottom">
		<shop-list @search="search" :list="shopList" @onSelectShop="onSelectShop" @close="onClose"></shop-list>
	</uni-popup>
</view>
</template>

<script>
export default {
	data() {
		return {
			currentIndex: 0,
			list: ['全部', '包厢状态', '绑定状态', '雀和友店'],
			statusList: [],
			bindList: ["打扫状态", '待打扫', '打扫中', '已完成', '过期未打扫'],

			selectShop: null,
			cleanList: [],
			statusIndex: 0,
			bindIndex: 0,
			shopList: [],
			staffList: [],
			staff_mobile: '',
			status: '',
			page: 1,
			isLastPage: false,
			isnodata: false

		};
	},

	onLoad(option) {
		var select = option.selectShop;
		if (select != "") {
			this.selectShop = JSON.parse(select);
			this.getStaff();
		}

		this.getShopList();
	},
	onShow() {

		this.getList();
	},

	methods: {

		nextPage() {
			if (this.isLastPage) return;
			this.page += 1;
			this.getList();
		},


		getStaff() {
			let param = {
				shop_id: this.selectShop.id,
				role: '保洁员'

			};
			let that = this;
			this.$api.staffList(param).then(res => {

				console.info(JSON.stringify(res));
				if (res.code == 1) {
					that.staffList = res.data;
					if (that.staffList.length > 0) {
						that.staff_mobile = that.staffList[0].mobile;
					}
				} else {

				}
			})
		},

		edit(item) {
			uni.navigateTo({
				url: '../room/edit?id=' + item.id
			})
		},

		onClose() {
			this.$refs.shopPicker.close();
		},
		getShopList() {
			let param = {
				keyword: this.keyword
			};
			let that = this;
			this.$api.getShopList(param).then(res => {

				console.info(JSON.stringify(res));
				if (res.code == 1) {
					that.shopList = res.data;
					if (that.shopList.length > 0) {

					}
				} else {

				}
			})
		},

		showShop() {
			this.$refs.shopPicker.open();

		},
		search(value) {

			this.keyword = value;
			this.getShopList();

		},

		onSelectShop(item) {
			this.selectShop = item;
			this.$refs.shopPicker.close();
			this.page = 1;
			this.isnodata = false;
			this.isLastPage = false;
			this.cleanList = [];
			this.getList();
			this.getStaff();

		},


		changeStatus(e) {
			console.info(e.detail.value);
			this.statusIndex = e.detail.value;
			this.staff_mobile = this.staffList[this.statusIndex].mobile;
			this.page = 1;
			this.isnodata = false;
			this.isLastPage = false;
			this.cleanList = [];
			this.getList();
		},
		changeBind(e) {
			this.bindIndex = e.detail.value;
			if (e.detail.value == 0) {
				this.status = "";
			} else if (e.detail.value == 1) {
				this.status = "undo";
			} else if (e.detail.value == 2) {
				this.status = "doing";

			} else if (e.detail.value == 4) {
				this.status = "done";
			} else if (e.detail.value == 5) {
				this.status = "undone";
			}
			this.page = 1;
			this.isnodata = false;
			this.isLastPage = false;
			this.cleanList = [];
			this.getList();
		},

		clickAdd() {
			uni.navigateTo({
				url: '../room/add?selectShop=' + JSON.stringify(this.selectShop)
			})
		},
		getList() {
			let param = {
				shop_id: this.selectShop.id,
				staff_mobile: this.staff_mobile,
				status: this.status,
				page: this.page
			};
			let that = this;
			this.$api.cleanList(param).then(res => {

				console.info(JSON.stringify(res));
				if (res.code == 1) {

					let length = res.data.length;
					for (let i = 0; i < length; i++) {
						that.cleanList.push(res.data[i]);
					}
					if (length < 10) {
						this.isLastPage = true;
					}
					if (that.cleanList.length > 0) {
						that.isnodata = false;
					} else {
						that.isnodata = true;
					}
				} else {
				}
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.room {
	.w12 {
		width: 24rpx;
	}

	.w82 {
		width: 164rpx;
		height: 164rpx;
	}

	.w72 {
		width: 144rpx;
		display: inline-block;
	}

	.list {
		height: calc(100vh - 96rpx);
	}

	.add {
		position: fixed;
		bottom: 100px;
		right: 10rpx;
		width: 80rpx;
		height: 80rpx;
		line-height: 80rpx;
		border: 2rpx solid #418FF4;
	}
}
 </style>
